<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%@include file="/WEB-INF/pages/include/css-resource.jsp"%>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/jquery-treegrid/0.2.0/css/jquery.treegrid.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/bootstrap-table.min.css">
<title>功能管理</title>
<style type="text/css">
.row {
	margin-bottom: 10px;
}
</style>
</head>
<body>
	<%@include file="/WEB-INF/pages/include/header.jsp"%>
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a
				href="${pageContext.request.contextPath}/main.html"><i
					class="fas fa-home"></i>主页</a></li>
			<li class="breadcrumb-item active" aria-current="page">功能管理</li>
		</ol>
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<a class="btn btn-primary" href="" title="添加" data-toggle="modal"
					data-target="#addRoleModal"> <i class="fas fa-plus"></i>&nbsp;添加功能组
				</a> <a class="btn btn-primary"
					href="${pageContext.request.contextPath}/app/role/add.html"
					title="添加"> <i class="fas fa-plus"></i>&nbsp;添加功能模块
				</a> <a class="btn btn-success" href="javascript:refresh()" title="刷新">
					<i class="fas fa-sync-alt"></i>&nbsp;刷新
				</a> <a class="btn btn-secondary float-right"
					href="${pageContext.request.contextPath}/main.html" title="返回">
					<i class="fas fa-reply"></i>&nbsp;返回
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table id="table"></table>
			</div>
		</div>
	</div>
	<%@include file="/WEB-INF/pages/include/js-resource.jsp"%>
	<script
		src="${pageContext.request.contextPath}/lib/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/lib/bootstrap-table/1.16.0/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

	<script type="text/javascript">
		var $table = $('#table');
		$table.bootstrapTable({
			url : "${pageContext.request.contextPath}/api/function/list",
			idField : 'id',
			parentIdField : 'parent',
			treeShowField : 'name',
			exportDataType : "all",
			columns : [ {
				field : 'name',
				title : '功能模块名',
			}, {
				field : 'code',
				title : 'URL',
			}, {
				field : 'icon',
				title : '图标',
				align : "center",
				formatter : 'iconFormatter'
			}, {
				field : 'disabled',
				title : '禁用',
				align : "center",
				formatter : 'disabledFormatter'
			}, {
				field : 'id',
				title : '操作',
				align : "center",
				formatter : 'actionFormatter'
			} ],
			onPostBody : function() {
				var columns = $table.bootstrapTable('getOptions').columns
				if (columns && columns[0][1].visible) {
					$table.treegrid({
						treeColumn : 0,
						onChange : function() {
							$table.bootstrapTable('resetWidth')
						}
					})
				}
			}
		});

		function iconFormatter(value, row, index) {
			if (value != null || value != "") {
				return '<i class="'+value+'"></i>';
			}
		}
		function disabledFormatter(value, row, index) {
			if (value) {
				return '<div class="custom-control custom-checkbox mr-sm-2"><input type="checkbox" class="custom-control-input" id="C'+row.id+'" checked><label class="custom-control-label" for="C'
						+ row.id
						+ '" onchange="changeDisabled(\''
						+ row.id
						+ '\')"></label></div>';
			} else {
				return '<div class="custom-control custom-checkbox mr-sm-2"><input type="checkbox" class="custom-control-input" id="C'
						+ row.id
						+ '" onchange="changeDisabled(\''
						+ row.id
						+ '\')"><label class="custom-control-label" for="C'+row.id+'"></label></div>';
			}
		}
		function actionFormatter(value, row, index) {
			return '<button type="button" class="btn btn-info btn-sm" title="编辑"> <i class="fas fa-edit"></i></button>&nbsp;&nbsp;<button type="button" class="btn btn-danger btn-sm" title="删除"><i class="fas fa-trash-alt"></i></button>';
		}

		function changeDisabled(id) {
			$
					.ajax({
						url : "${pageContext.request.contextPath}/api/function/change/disabled",
						type : "POST",
						dataType : "json",
						data : {
							id : id,
							checked : $("#C" + id).is(":checked")
						},
						success : function(result) {
							alert(result.message);
						},
						error : function(err) {
							alert("状态更改失败！");
							console.log(err);
						}
					});
		}
	</script>
</body>
</html>